<template>
  <div style="display: flex; align-items: center; justify-items: center;flex-direction: column">
    <!-- 主页的主体部分 -->
    <!-- 走马灯展示 -->
    <div
        style="background-color: white; border-radius: 12px;box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);display: flex; width: 100%;height: 27%; align-items: center;justify-content: center">
      <el-carousel :interval="4000" type="card" height="370px" style="width: 95%">
        <el-carousel-item v-for="item in imageUrls" :key="item">
          <div style="box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);">
            <el-image
                :src="item"
            >
            </el-image>
          </div>
        </el-carousel-item>
      </el-carousel>
    </div>
    <!--  详情框-->
    <div style="display: flex; width: 100%">
      <el-card class="massageCard-2" style="font-weight: bolder;" shadow="hover">未完成任务
        <div style="display: flex;align-items: center;justify-content: center;height: 100px;width: 150px;
font-size: 24px;color:rgb(239, 136, 51)">
          {{ undoneTaskNum }} 个
        </div>
      </el-card>
      <el-card class="massageCard-3" style="font-weight: bolder;" shadow="hover">已完成任务
        <div
            style="display: flex;align-items: center;justify-content: center;height: 100px;width: 150px;font-size: 24px;color:rgb(119, 170, 50) ">
          {{ doneTaskNum }} 个
        </div>
      </el-card>
      <el-card class="massageCard-1" style="font-weight: bolder;" shadow="hover">待提交日报
        <div style="display: flex;align-items: center;justify-content: center;height: 100px;width: 150px;
font-size: 24px;color:rgb(108, 128, 247)">
          {{ unSubimtNoteNum }} 个
        </div>
      </el-card>
      <el-card class="massageCard-4" style="font-weight: bolder;" shadow="hover">待提交周报
        <div style="display: flex;align-items: center;justify-content: center;height: 100px;width: 150px;
font-size: 24px;color:rgb(56, 128, 247)">
          {{ unSubimtWeekNoteNum }} 个
        </div>
      </el-card>
    </div>
    <!--    组件拼接-->
    <div style="display: flex;height: 70vh;width: 100%;margin-top: 4px;flex-direction: column">

      <div
          style="display: flex; align-content: center;width: 100%;height: 70vh;flex-direction: row">
        <!--日历-->
        <div style="width: 30%;">
          <el-calendar v-model="date">
          </el-calendar>
        </div>
        <!--零碎组件-->
        <div style="width: 70%;display: flex; flex-direction:column">
          <div style="width: 100%;display: flex; flex-direction:row;height: 60%">
            <!--快捷通道-->
            <div style="background-color: white; border-radius: 12px;width: 27% ;display: flex;
     flex-direction: column; justify-content: center; align-content: center; margin-left: 12px;margin-right: 6px;box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);">
              <div style=" width: 92%; height:12%;margin-top: 12px;margin-left: 12px;margin-right: 12px;margin-bottom: 7px;display: flex;align-content: center;justify-content: center;
            font-size: 30px; font-weight: bolder;">
                ⚡️快捷通道
              </div>
              <div style=" width: 92%; height:28%;margin-top: 12px;margin-left: 12px;margin-right: 12px;margin-bottom: 7px;display: flex;align-content: center;justify-content: center;
            font-size: 30px; font-weight: bolder;">
                <el-button type="primary" round style="width: 90%;font-size: 27px" @click="moveToTargetPage('mytasks')">
                  我的任务
                </el-button>
              </div>
              <div style=" width: 92%; height:28%;margin-top: 12px;margin-left: 12px;margin-right: 12px;margin-bottom: 7px;display: flex;align-content: center;justify-content: center;
            font-size: 30px; font-weight: bolder;">
                <el-button type="primary" round style="width: 90%;font-size: 27px"
                           @click="moveToTargetPage('taskSummary')">任务汇总
                </el-button>
              </div>
              <div style=" width: 92%; height:28%;margin-top: 12px;margin-left: 12px;margin-right: 12px;margin-bottom: 7px;display: flex;align-content: center;justify-content: center;
            font-size: 30px; font-weight: bolder;">
                <el-button type="primary" round style="width: 90%;font-size: 27px" @click="moveToTargetPage('myNotes')">
                  我的日志
                </el-button>
              </div>
            </div>
            <!--代办事项-->
            <div style="background-color: white; border-radius: 12px;width: 73% ;display: flex;
     flex-direction: column; align-content: center;margin-left: 6px;margin-right: 12px;box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);">
              <div
                  style="width: 97%; height:12%;margin-left: 12px;margin-right: 12px;display: flex;align-items: center;justify-items: center;">
                <el-input
                    placeholder="请输入代办事项"
                    v-model="createTodoEventData"
                    clearable
                >
                </el-input>
                <el-button type="primary" icon="el-icon-plus" circle style="margin-left: 7px"
                           @click="addNewTodoEvent"></el-button>
              </div>
              <div style="display: flex;justify-content: center;width:100%;height: 76%;">
                <el-tabs v-model="activeName" @tab-click="handleClick" style="width: 100%" stretch="true">
                  <el-tab-pane label="🐮未完成" name="todo">
                    <el-table
                        ref="multipleTable"
                        :data="todoEventTableData"
                        tooltip-effect="dark"
                        style="width: 100%;background-color: white;"
                        @selection-change="handleSelectionChange"
                        height="250"
                    >
                      <el-table-column
                          type="selection"
                          width="55">
                      </el-table-column>
                      <el-table-column
                          prop="context">
                      </el-table-column>
                    </el-table>
                  </el-tab-pane>

                  <el-tab-pane label="✅已完成" name="done">
                    <el-table
                        ref="multipleTable"
                        :data="todoEventTableData"
                        tooltip-effect="dark"
                        style="width: 100%;background-color: white;"
                        height="250"
                    >
                      <el-table-column
                          prop="context">
                      </el-table-column>
                    </el-table>
                  </el-tab-pane>
                </el-tabs>
              </div>
              <div style="display: flex;flex-direction: row;margin: 7px;align-items: center;justify-content: center">
                <el-button type="success" icon="el-icon-check" circle style="margin-right: 8px" @click="updateStatusTodoEvent"></el-button>
                <el-button type="danger" icon="el-icon-delete" circle @click="delTodoEvent"></el-button>
              </div>
            </div>
          </div>
          <div style="width: 100%;display: flex; flex-direction:row;height: 40%">
            <div style="background-color: whitesmoke; border-radius: 12px;width: 100% ;display: flex;
     flex-direction: row; justify-content: center; align-content: center; margin-left: 12px;margin-right: 12px; margin-top: 12px;box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
font-size: 24px; font-weight: bolder;
">
              <div style="margin-top: 100px">
                😳 您未在此添加任何组件
              </div>
            </div>
          </div>
        </div>

      </div>

    </div>


  </div>
</template>

<script>
import myTasks from "@/views/taskCenter/MyTasks.vue";

export default {
  name: "Workbench",
  computed: {
    myTasks() {
      return myTasks
    }
  },
  data() {
    return {
      // 当前用户未完成任务数
      undoneTaskNum: "",
      // 当前用户完成用户数
      doneTaskNum: "",
      // 当前用户待提及日报数
      unSubimtNoteNum: "",
      // 当前用户待提交周报数
      unSubimtWeekNoteNum: "",
      loginUser: JSON.parse(localStorage.getItem("loginUser")), //当前登录用户
      // 走马灯图片集合
      imageUrls: ["http://112.124.13.174:9000/briefreport/workBranchImges/1.png",
        "http://112.124.13.174:9000/briefreport/workBranchImges/2.png",
        "http://112.124.13.174:9000/briefreport/workBranchImges/3.png",
        "http://112.124.13.174:9000/briefreport/workBranchImges/4.png"
      ],
      // 日历数据
      date: new Date(),
      // 新增待办事项数据绑定
      createTodoEventData: "",
      // 代办事务类型切换数据绑定
      activeName: "todo",
      // 待办事务表格数据绑定
      todoEventTableData: [],
      // 新增待办事务实体
      todoEvent: {
        eventId: "",
        context: "",
        eventStatus: 0,
        userId: JSON.parse(localStorage.getItem("loginUser")).uid,
        createTime: "",
        updateTime: "",
        deadlineTime: ""
      },
      multipleSelection: [], //提交提醒选中
      eventStatus:0, //待办事务状态，默认为0

    }
  },
  methods: {
    // 工作台快捷通道
    moveToTargetPage(pageName) {
      if (pageName == "myNotes") {
        // 跳转到我的日志
        this.$router.push('/myNotes')
      } else if (pageName == "mytasks") {
        // 跳转到我的任务
        this.$router.push('/mytasks')
      } else if (pageName == "taskSummary") {
        // 跳转到任务汇总
        this.$router.push('/taskSummary')
      }
    },

    // 新增待办事项
    addNewTodoEvent() {
      this.todoEvent.context=this.createTodoEventData
      this.$request.post("/todoEvent/addNewTodoEvent",this.todoEvent).then(res=>{
        if (res.successFlag){
          this.$message.success("添加待办事务成功！")
          this.getTodoEventData()
          this.createTodoEventData=""
        }else {
          this.$message.error("添加待办事务失败！")
        }
      })

    },
    // 删除待办事项
    delTodoEvent() {
      if (this.multipleSelection == []) {
        this.$message.error("请先选中！")
      } else {
        this.$request.post("/todoEvent/delTodoEvent", this.multipleSelection).then(
            async res => {
              if (res.successFlag) {
                await this.getTodoEventData()
              } else {
                this.$message.error(res.errorMsg)
              }
            })
      }
    },
    // 改变代办事项状态
    updateStatusTodoEvent() {
      if (this.multipleSelection == []) {
        this.$message.error("请先选中！")
      } else {
        this.$request.put("/todoEvent/updateTodoEvent", this.multipleSelection).then(
            async res => {
              if (res.successFlag) {
                await this.getTodoEventData()
              } else {
                this.$message.error(res.errorMsg)
              }
            }
        )
      }
    },

    // 获取待办事务数据
    getTodoEventData(){
      this.$request.get("/todoEvent/getUserTodoEventByStatus", {
        params: {
          userId: this.loginUser.uid,
          eventStatus: this.eventStatus  //默认先查询未完成的事务
        }
      }).then(res => {
        if (res.successFlag){
          this.todoEventTableData=res.data
        }else {
          this.$message.error("查询待办事务失败！")
        }
      })
    },

    // 待办事务选中
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },

    // 待办事务状态切换更改展示数据
    handleClick(tab) {
      if (tab.name=='done'){
        this.eventStatus=1
      }else if (tab.name=='todo'){
        this.eventStatus=0
      }
      this.getTodoEventData()
    }

  },
  mounted() {
    // 加载当前用户的任务数据和日志数据
    this.$request.get("/user/getUserJobDetails", {
      params: {
        userId: this.loginUser.uid
      }
    }).then(res => {
      if (res.successFlag) {
        let data = res.data;
        this.undoneTaskNum = data[0]
        this.doneTaskNum = data[1]
        this.unSubimtNoteNum = data[2]
        this.unSubimtWeekNoteNum = data[3]
      } else {
        this.$message.error("获取用户任务和日志详情出错！")
      }
    })

    // 加载当前用户的待办事务
    this.$request.get("/todoEvent/getUserTodoEventByStatus", {
      params: {
        userId: this.loginUser.uid,
        eventStatus: 0  //默认先查询未完成的事务
      }
    }).then(res => {
      if (res.successFlag){
        this.todoEventTableData=res.data
      }else {
        this.$message.error("查询待办事务失败！")
      }
    })
  }
}
</script>

<style scoped>
.el-card__header {
  background-color: rgb(0, 128, 252) !important;
}

.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}
</style>